<template>
  <el-card class="box-container">
    <el-button type="primary" @click="reSort">重新排序</el-button>
    <CardList />
  </el-card>
  <UpDateModal ref="CardDOM" />
</template>

<script setup lang="ts">
  import { ref, provide, reactive ,watch} from 'vue'
  import { useStore } from 'vuex'
  import { key } from './store'
  import UpDateModal from '@/components/UpDateModal'
  import CardList from '@/components/CardList'
  const store = useStore(key)
  const cardlist = reactive <number[]> ([1, 2, 3, 4, 5])
  provide('cardlist', cardlist)
  watch(():number => store.state.flag, ():void => {
    cardlist[store.state.activeIndex] = store.state.num
  })
  const reSort = ():void => {
    cardlist.sort(() => Math.random() - 0.5)
  }
</script>

<style>
  h2 {
    margin: 0;
    padding: 0;
  }

  .box-container {
    width: 800px;
    margin: 0 auto;
  }

  .box-container>.el-card__body {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  body {
    height: 95vh;
    width: 95vw;
  }
</style>